<!-- Basic example -->
<div zf-panel class="docs-example-panel" id="example-panel-1">
  <a href="#" zf-close class="close-button">&times;</a>
  <p>This is a basic panel.</p>
</div>

<!-- Positioned examples -->
<div zf-panel zf-advise zf-ignore-all-close class="docs-example-panel" id="example-panel-left">
  <a zf-close class="close-button">&times;</a>
  <p>This is a left panel.</p>
  <p>It also has the `zf-ignore-all-close` attribute applied, so clicking on the body will not close this panel.</p>
</div>
<div zf-panel class="docs-example-panel" id="example-panel-right" position="right">
  <a zf-close class="close-button">&times;</a>
  <p>This is a right panel.</p>
</div>
<div zf-panel class="docs-example-panel" id="example-panel-top" position="top">
  <a zf-close class="close-button">&times;</a>
  <p>This is a top panel.</p>
  <p>It also allows you to close the panel by clicking on the body while it's open.</p>
</div>
<div zf-panel class="docs-example-panel" id="example-panel-bottom" position="bottom">
  <a zf-close class="close-button">&times;</a>
  <p>This is a bottom panel.</p>
</div>

<!-- Fixed example -->
<div zf-panel class="docs-example-panel panel-fixed" position="left" id="example-panel-fixed">
  <a href="#" zf-close class="close-button">&times;</a>
  <p>This is a fixed panel.</p>
</div>

<!-- Touch example -->
<div zf-panel zf-swipe-close="left" class="docs-example-panel" id="example-touch-panel">
  <a zf-close class="close-button">&times;</a>
  <p>Swipe to the left to close this panel.</p>
</div>
